<template>
    <el-form label-width="120px" :model="clueRemark" :rules="clueRemarkRules" ref="clueRemarkFormRef">
        <el-form-item label="ID">
            <div class="detail">{{ clueDetail.id }}</div>
        </el-form-item>

        <el-form-item label="负责人">
            <div class="detail">{{ clueDetail.ownerDo.name }}</div>
        </el-form-item>

        <el-form-item label="所属活动">
            <div class="detail"> {{ clueDetail.activityDo.name }} </div>
        </el-form-item>

        <el-form-item label="姓名">
            <div class="detail"> {{ clueDetail.fullName }} </div>
        </el-form-item>

        <el-form-item label="称呼">
            <div class="detail">{{ clueDetail.appellationDo.typeValue }}</div>
        </el-form-item>

        <el-form-item label="手机">
            <div class="detail">{{ clueDetail.phone }}</div>
        </el-form-item>

        <el-form-item label="微信">
            <div class="detail">{{ clueDetail.weixin }}元</div>
        </el-form-item>

        <el-form-item label="QQ">
            <div class="detail">{{ clueDetail.qq }}</div>
        </el-form-item>

        <el-form-item label="邮箱">
            <div class="detail">{{ clueDetail.email }}</div>
        </el-form-item>

        <el-form-item label="年龄">
            <div class="detail">{{ clueDetail.age }}</div>
        </el-form-item>

        <el-form-item label="职业">
            <div class="detail">{{ clueDetail.job }}</div>
        </el-form-item>

        <el-form-item label="年收入">
            <div class="detail">{{ clueDetail.yearIncome }}</div>
        </el-form-item>

        <el-form-item label="住址">
            <div class="detail">{{ clueDetail.address }}</div>
        </el-form-item>

        <el-form-item label="是否贷款">
            <div class="detail">{{ clueDetail.loanDo.typeValue }}</div>
        </el-form-item>
        <el-form-item label="意向状态">
            <div class="detail">{{ clueDetail.intentionStateDo.typeValue }}</div>
        </el-form-item>
        <el-form-item label="意向产品">
            <div class="detail">{{ clueDetail.intentionProductDo.name }}</div>
        </el-form-item>
        <el-form-item label="线索状态">
            <div class="detail">{{ clueDetail.stateDo.typeValue }}</div>
        </el-form-item>
        <el-form-item label="线索来源">
            <div class="detail">{{ clueDetail.sourceDo.typeValue }}</div>
        </el-form-item>

        <el-form-item label="线索描述">
            <div class="detail">{{ clueDetail.description }}</div>
        </el-form-item>
        <el-form-item label="下次跟踪时间">
            <div class="detail">{{ clueDetail.nextContactTime }}</div>
        </el-form-item>


        <el-form-item label="线索跟踪记录" prop="noteContent">
            <!--
   rows 输入框行数，仅type为'textarea'时有效
   -->
            <el-input v-model="clueRemark.noteContent" rows="8" type="textarea" placeholder="请输入活动备注记录" />
        </el-form-item>
        <el-form-item label="跟踪方式" prop="noteWay">
            <el-select v-model="clueRemark.noteWay" placeholder="请选择跟踪方式" clearable @click="loadDicData('noteWay')">
                <el-option v-for="item in noteWayOptions" :key="item.id" :label="item.typeValue" :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" v-on:click="clueRemarkSubmit()">提 交</el-button>
            <el-button type="success" v-on:click="convertCustomer" v-if="clueDetail.stateDo.id != -1">转换客户</el-button>
            <el-button type="primary" plain v-on:click="goBack">返 回</el-button>
        </el-form-item>

        <el-form-item>
            <el-table :data="clueRemarkPageInfo.list" style="width: 100%" @selection-change="handSelection">
                <el-table-column type="index" label="序号" width="65" />
                <el-table-column property="noteWayDo.typeValue" label="跟踪内容" />
                <el-table-column property="noteContent" label="跟踪内容" />
                <el-table-column property="createTime" label="创建时间" />
                <el-table-column property="createByDo.name" label="创建人" />
                <el-table-column property="editTime" label="编辑时间" />
                <el-table-column property="editByDo.name" label="编辑人" />
                <el-table-column label="操作" width="110">
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)" />
                        <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next, jumper, total" :total="clueRemarkPageInfo.total"
                :page-size="clueRemarkPageInfo.pageSize" @change="toPage" />
        </el-form-item>
    </el-form>

    <!--编辑历史跟踪记录的弹窗对话框-->
    <el-dialog v-model="clueRemarkDialogVisible" title="编辑线索跟踪记录" width="800" center>
        <el-form label-width="auto" :model="editClueRemark" :rules="editClueRemarkRules"
            ref="editActivityRemarkFormRef">
            <el-form-item label="线索跟踪记录" prop="noteContent">
                <el-input v-model="editClueRemark.noteContent" rows="8" type="textarea" placeholder="请输入线索跟踪记录" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="clueRemarkDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editClueRemarkSubmit(editClueRemarkFormRef)">提 交</el-button>
            </div>
        </template>
    </el-dialog>

    <!--转换客户的弹窗对话框-->
    <el-dialog v-model="convertCustomerDialogVisible" title="转换客户" width="800" center>
        <el-form label-width="auto" :model="customer" >
            <el-form-item label="意向产品" prop="product">
                <el-select v-model="customer.product" placeholder="请选择意向产品" clearable @click="loadProduct()">
                    <el-option v-for="item in productOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户描述" prop="description">
                <el-input v-model="customer.description" rows="8" type="textarea" placeholder="请输入客户描述" />
            </el-form-item>
            <el-form-item label="下次跟踪时间" prop="nextContactTime">
                <el-date-picker v-model="customer.nextContactTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择下次跟踪时间" style="width: 100%;" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="convertCustomerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="convertCustomerSubmit()">转 换</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>

import { ref, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showMessage } from '../util/message'
import { doGet ,doPost} from '../http/httpRequest'

let route = useRoute()
let router = useRouter()

//线索备注
let clueRemarkFormRef = ref()
let clueRemark = ref({})

//分页备注
let clueRemarkPageInfo = ref({})

//线索详情
let clueDetail = ref({
    ownerDo: {},
    stateDo: {},
    sourceDo: {},
    intentionProductDo: {},
    activityDo: {},
    loanDo: {},
    intentionStateDo: {},
    appellationDo: {}
})

//查询线索详情
const loadClueDetail = async () => {
    //从路由地址中获取clueId
    let id = route.params.clueId

    let resp = await doGet('/api/clue/' + id, {});
    if (resp.data.code == 200) {
        clueDetail.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }
}

onMounted(() => {
    loadClueDetail()
    loadClueRemarkList(1)
})


//跟踪方式数组对象数据
let noteWayOptions = ref([{}])
//查询跟踪方式
const loadDicData = async typeCode => {
    let resp = await doGet('/api/dic/' + typeCode, {})
    if (resp.data.code == 200) {
        noteWayOptions.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }
}

//局部刷新
const flushPage = inject('flush')

//提交线索跟踪记录
const clueRemarkSubmit = async () => {
    const resp = await doPost('/api/clue/remark', {
        clueId: route.params.clueId,
        noteWay: clueRemark.value.noteWay,  //跟踪方式
        noteContent: clueRemark.value.noteContent  //跟踪内容
    })

    if (resp.data.code == 200) {
        showMessage(resp.data.msg, 'success')
        flushPage()//局部刷新
    } else {
        showMessage(resp.data.msg, 'error')
    }
}

//分页查询跟踪记录
const loadClueRemarkList = async current => {
    let clueId = route.params.clueId

    let resp = await doGet('api/clue/'+clueId+'/remark', {
        current: current
    })
    if (resp.data.code == 200) {
        clueRemarkPageInfo.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }
}

const toPage = (current,pageSize)=>{
    loadClueRemarkList(current)
}


//客户
const customer = ref({})

//产品下拉框
const productOptions = ref([{}])

//转换客户弹窗变量控制
let convertCustomerDialogVisible = ref(false)
//展示弹窗
const convertCustomer = () => {
    convertCustomerDialogVisible.value = true
}

//查询产品
const loadProduct = async () => {
    let resp = await doGet('/api/product', {})
    if (resp.data.code == 200) {
        productOptions.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }
}

//转换客户
const convertCustomerSubmit = async () => {
    let resp = await doPost('/api/customer', {
        clueId: route.params.clueId,
        productId: customer.value.product,  //意向产品
        description: customer.value.description,  //客户描述
        nextContactTime: customer.value.nextContactTime  //下次跟踪时间
    })
    if (resp.data.code == 200) {
        showMessage(resp.data.msg, 'success')
        flushPage()//局部刷新
    } else {
        showMessage(resp.data.msg, 'error')
    }
}
</script>

<style scoped></style>